<template>
  <div class="main-from">
    <p class="describe">1、请务必详细填写您从事过的所有全职工作经历；</p>
    <p class="describe">2、请从最近的工作经历开始填起；</p>
    <p class="describe">3、请不要在您的工作履历中留下任何未说明的空白时段；</p>
    <p class="describe">
      4、如果您在同一家单位（包括目前单位）担任多项职务，请将担任过的职务填写在同一空格中；
    </p>
    <ul class="sheet" v-for="item in list" :key="item.id">
      <li class="sheet-child">
        <div class="child-name">单位</div>
        <div class="child-content">{{ item.unit }}</div>
      </li>
      <li class="sheet-child">
        <div class="child-name">职务</div>
        <div class="child-content">{{ item.jobTitle }}</div>
      </li>
      <li class="sheet-child">
        <div class="child-name">起止时间</div>
        <div class="child-content">{{ item.time }}</div>
      </li>
      <li class="sheet-child">
        <div class="child-name">操作</div>
        <div class="child-content">
          <el-button type="primary" @click="edit(item)">编辑</el-button>
          <el-button type="info" @click="delete (item.id)">删除</el-button>
        </div>
      </li>
    </ul>
    <div class="add" @click="onAdd"><span class="icon-add">+</span>添加</div>
    <el-dialog v-model="visible" :show-close="false">
      <el-form ref="ruleFormdialog" :model="ruleForm" :rules="rules" label-position="left" class="dialog-from">
        <el-form-item class="el-large" label="国家/地区" prop="countryRegion">
          <el-select v-model="ruleForm.countryRegion" placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item class="el-large" label="省份" prop="province">
          <el-select v-model="ruleForm.province"  placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item class="el-large" label="城市" prop="city">
          <el-input v-model="ruleForm.city" />
        </el-form-item>
        <el-form-item class="el-large" label="单位" prop="unit">
          <el-input v-model="ruleForm.unit" />
        </el-form-item>
        <el-form-item class="el-large" label="职务" prop="jobTitle">
          <el-input v-model="ruleForm.jobTitle" />
        </el-form-item>
        <el-form-item class="el-large" label="主要职责" prop="mainDuty">
          <el-input v-model="ruleForm.mainDuty" :rows="4" type="textarea" placeholder="请输入主要职责" />
        </el-form-item>
        <el-form-item label="起止日期" class="space-around" required>
          <el-form-item class="el-Small prop" prop="yearOne">
            <el-input v-model="ruleForm.yearOne" />
          </el-form-item>
          <span class="filling">年</span>
          <el-form-item class="el-Small prop" prop="moomOne">
            <el-input v-model="ruleForm.moomOne" />
          </el-form-item>
          <span class="filling">月</span>
          <span class="filling">-</span>
          <el-form-item class="el-Small prop" prop="yearTwo">
            <el-input v-model="ruleForm.yearTwo" />
          </el-form-item>
          <span class="filling">年</span>
          <el-form-item class="el-Small prop" prop="moomTwo">
            <el-input v-model="ruleForm.moomTwo" />
          </el-form-item>
          <span class="filling">月</span>
        </el-form-item>
        <div class="footer-but">
          <el-button type="primary" @click="saveDialog('ruleFormdialog')">保存</el-button>
          <el-button type="info" @click="resetDialog('ruleFormdialog')">重置</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import rules from '@/util/rules.js'
export default {
  name: "resume", // 工作履历
  props: {},
  data() {
    return {
      visible: false,
      ruleForm: {
        unit: "",
        jobTitle: '',
        time: '',
      },
      rules: rules,
      list: [
        {
          unit: "上海拓印视野有限公司拟公司",
          jobTitle: 'CEO',
          time: '2021/01-2022/10',
          id: 1
        },
        {
          unit: "上海拓印视野有限公司拟公司",
          jobTitle: 'CEO',
          time: '2021/01-2022/10',
          id: 2
        }
      ]
    };
  },
  methods: {
    onAdd() {
      this.visible = !this.visible;
    },
    onEdit() {
      this.visible = !this.visible;
    },
    saveDialog(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.visible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetDialog(formName) {
      (this.ruleForm = {}), this.$refs[formName].resetFields();
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.main-from {
  min-height: 990px;

  .describe {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5a5a5a;
    line-height: 30px;
    letter-spacing: -0.04px;
  }

  .sheet {
    width: 100%;
    border: 0.25px solid #003963;
    margin-top: 45px;

    .sheet-child {
      display: flex;
      height: 56.25px;
      line-height: 56.25px;
      border: 0.5px solid #003963;

      .child-name {
        text-align: center;
        width: 68px;
        height: 100%;
        padding: 0 41px;
        background: #f0f5fa;
        border-right: 1px solid #003963;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align-last: justify;
        color: #003963;
      }

      .child-content {
        padding-left: 10px;
        height: 100%;
        flex: 1;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #5a5a5a;

        ::v-deep .el-button {
          width: 65px;
          height: 35px;
          font-size: 16px;
        }
      }
    }
  }

  .add {
    cursor: pointer;
    margin-top: 40px;
    width: 60%;
    text-align: center;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #003963;

    .icon-add {
      display: inline-block;
      width: 32px;
      height: 32px;
      background: #c6a67d;
      border-radius: 50%;
      font-size: 30px;
      text-align: center;
      line-height: 25px;
      color: #ffffff;
      font-weight: bold;
      margin-right: 8px;
    }
  }

  ::v-deep .el-dialog {
    min-width: 774px;
  }

  .dialog-from {
    overflow: hidden;
    margin: 0 auto;
    width: 559px;
    height: 748px;

    .years {
      // width: 412px;
      width: 100%;
      display: flex;

      ::v-deep .el-input .el-input__inner {
        width: 52px;
        height: 42px;
      }
    }

    .prop {
      ::v-deep .el-form-item__content {
        width: auto;
        display: block;
      }

      ::v-deep .el-input__inner {
        width: 55px;
      }
    }

    .footer-but {
      width: 100%;
      text-align: center;

      ::v-deep .el-button {
        margin-top: 80px;
        width: 250px;
        height: 55px;

        &:last-child {
          margin-left: 45px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .main-from {
    min-height: 990px;

    .describe {
      font-size: 14px;
    }

    .sheet {
      width: 100%;
      border: 0.25px solid #003963;
      margin-top: 45px;

      .sheet-child {
        height: 28.25px;
        line-height: 28.25px;

        .child-name {
          text-align: center;
          width: 20%;
          height: 100%;
          padding: 0 10px;
          font-size: 14px;
        }

        .child-content {
          padding-left: 5px;
          font-size: 14px;

          ::v-deep .el-button {
            width: 40px;
            height: 20px;
            font-size: 12px;
          }
        }
      }
    }

    .add {
      margin-top: 20px;
      width: 80%;
      font-size: 16px;

      .icon-add {
        width: 25px;
        height: 25px;
        font-size: 20px;
        line-height: 22px;
      }
    }

    ::v-deep .el-dialog {
      min-width: 100%;
    }

    .dialog-from {
      margin: 0 auto;
      height: auto;
      width: 100%;

      ::v-deep .el-form-item__label {
        width: 25%;
      }

      .years {
        width: 100%;
        display: flex;

        ::v-deep .el-input .el-input__inner {
          width: 20px;
          height: 28px;
        }
      }

      .prop {
        ::v-deep .el-input__inner {
          width: 25px;
        }
      }

      .footer-but {
        width: 100%;
        text-align: center;

        ::v-deep .el-button {
          margin-top: 30px;
          width: 125px;
          font-size: 14px;
          height: 30px;

          &:last-child {
            margin-left: 25px;
          }
        }
      }
    }
  }
}
</style>
